<template>
    <a-modal
      title="选择图标"
      :visible="myVisible"
      centered
      width="630px"
      :footer="null"
      :maskClosable="false"
      @cancel="myClose"
    >
      <ul class="icon-list">
          <li v-for="item in iconData" :key="item.icon_id" >
             <i :class="['iconfont','icon'+item.font_class]" @click="chooseIcon('icon'+item.font_class)"></i> 
          </li>
      </ul>
    </a-modal>
</template>

<script>
import iconData from '@/assets/fonts/iconfont.json'
export default {
  data() {
    return {
        myVisible: false,
        iconData: iconData.glyphs
    };
  },
  props: {
    iconClose:{
      type: Function,
      default:null
    },
    iconVisible:{
      type: Boolean,
      default: false
    }
  },
  methods: {
    //关闭弹窗
    myClose() {
       this.$emit('func');
    },
    //返回选中的图标
    chooseIcon(name){
      this.$emit('ifunc',name);
    }
  },
  computed: {},
  watch: {
    iconVisible(n){
      this.myVisible = n;
    },
  }
};
</script>

<style lang="stylus" scoped>
@import '~stylus/mixin.styl';
.icon-list
  margin: -14px -14px -14px -9px;
  min-height 200px
  max-height 500px
  overflow-y auto
  li
    width: 50px;
    margin-bottom: 10px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    i
      display block
      font-size 28px
      height 50px
      line-height 50px
      margin 10px auto
      color #333
      transition font-size 0.25s linear, width 0.25s linear
      cursor pointer
      &:hover
        font-size 50px
</style>